import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import Home1 from '../images/tabbar/home_1.png'
import Home2 from '../images/tabbar/home_2.png'
import Fast from '../images/tabbar/fast.png'
import My_1 from '../images/tabbar/my_1.png'
import My_2 from '../images/tabbar/my_2.png'
import './Nav.less'
import { withRouter } from 'react-router-dom';


const useStyles = makeStyles({
  root: {
    width: '100%',
    position: 'fixed',
    bottom: 0,
    left: 0,
    // display:pathname ?block:none
  },
});

function SimpleBottomNavigation(props) {
  const classes = useStyles();
  // 根据路由地址确定value的初始值
  // 定义导航栏初始值
  let initVal = 0
  // 定义path'nan'me
  let pathname = props.history.location.pathname;

  const [value, setValue] = React.useState(initVal);
  // 判断路由地址
  switch (pathname) {
    case '/home':
      initVal = 0
      break;
    case '/fast':
      initVal = 1
      break;
    case '/user':
      initVal = 2
      break;
    default:
      initVal = 0
      break;
  }
  // console.log(props)

  return (
    <BottomNavigation
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
        switch (newValue) {
          case 0:
            // 跳转首页
            props.history.push('/home')
            break;
          case 1:
            // 做题
            props.history.push('/fast')
            break;
          case 2:
            //我的
            props.history.push('/user')
            break;
          default:
            break;
        }
      }}
      showLabels
      className={classes.root}
      style={{ display: pathname === '/home' || pathname === '/fast' || pathname === '/user' ? 'flex' : 'none' }}
    >
      <BottomNavigationAction label="首页" icon={<img className='home_icon' src={value === 0 ? Home1 : Home2} alt="" />} />
      <BottomNavigationAction label="快速刷题" icon={<img className='fast_icon' src={value === 1 ? Fast : Fast} alt="" />} />
      <BottomNavigationAction label="我的" icon={<img className='my_icon' src={value === 2 ? My_1 : My_2} alt="" />} />
    </BottomNavigation>
  );
}
export default withRouter(SimpleBottomNavigation)
